<template>
    <div style="display: flex">
        <el-input style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" v-model="username"
                  placeholder="请输入学员姓名" clearable/>
        <el-select style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" v-model="trainClassId"
                   placeholder="请选择班级" filterable clearable class="filter-item">
            <!-- 动态生成班级选项 -->
            <el-option v-for="item in classOptions" :key="item.id" :label="item.trainClassNum" :value="item.id"/>
        </el-select>
        <el-select style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" v-model="courseId"
                   placeholder="请选择课程" filterable clearable>
            <el-option v-for="item in courseOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
        <el-select style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" v-model="isPass"
                   placeholder="是否及格" clearable>
            <el-option v-for="item in passOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">
            搜索
        </el-button>
    </div>
    <div>
        <!-- 数据表格区域 -->
        <el-table :data="tableData" :row-style="{ height: '77px' }" border
                  style="width: calc(100vw - 240px);height: 75vh;margin-top: 20px;font-size: 15px;">
            <!-- 学员姓名列 -->
            <el-table-column prop="username" label="姓名" align="center" width="auto"/>
            <!-- 班级列 -->
            <el-table-column prop="trainClassNum" label="班级" align="center" width="auto"/>
            <!-- 课程列 -->
            <el-table-column prop="courseName" label="课程名称" align="center" width="auto"/>
            <!-- 成绩列 -->
            <el-table-column prop="exampaperGetScore" label="成绩" align="center" width="auto"/>
            <!-- 是否及格列（带条件样式） -->
            <el-table-column label="是否及格" width="auto" align="center">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.isPass === 1">及格</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.isPass === 0">不及格</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="300">
                <template v-slot="scope">
                    <el-button type="primary" size="small" icon="View" @click="getRank(scope.row)">课程排名</el-button>
                    <el-button type="success" size="small" icon="View" @click="getExamHistroyLog(scope.row.id)">
                        考试记录
                    </el-button>
                    <el-button type="warning" size="small" icon="View" @click="getExamPaper(scope.row)">
                        查看试卷
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页栏-->
        <div class="demo-pagination-block" style="margin-top: 10px">
            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
                           layout="total, sizes, prev, pager, next, jumper" :total="total" :background="true"
                           @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>

        <el-dialog :close-on-click-modal="false" title="查看排名" v-model="dialogVisible" width="560" style="height: 200px" @close="reset()">
            <div style="text-align: center;font-size: 28px">
                当前排名：第{{rank}}名
            </div>
        </el-dialog>

        <el-dialog :close-on-click-modal="false" title="考试记录" v-model="logDialogVisible" width="600" @close="logReset()">
            <el-table :data="examHistroyLogs" :row-style="{ height: '30px' }" border
                      style="width: calc(100vw - 240px);height: 440px;margin-top: 20px;font-size: 15px;">
                <el-table-column prop="count" label="考试次数" align="center" width="auto"/>
                <el-table-column prop="score" label="考试分数" align="center" width="auto"/>
                <el-table-column prop="createTime" label="考试时间" align="center" width="auto"/>
            </el-table>
            <div class="demo-pagination-block" style="margin-top: 10px">
                <el-pagination :current-page="logCurrentPage" :page-size="logPageSize" :page-sizes="[10, 20, 30, 50]"
                               layout="total, sizes, prev, pager, next, jumper" :total="examHistroyLogTotal" :background="true"
                               @size-change="handleLogSizeChange" @current-change="handleLogCurrentChange"/>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {ref, computed} from 'vue';
    import request from "~/utils/request.js";

    export default {
        data() {
            return {
                dialogVisible: false,
                tableData: [],
                courseOptions: [],
                classOptions: [],
                passOptions: [
                    {
                        value: 0,
                        label: "不及格"
                    }, {
                        value: 1,
                        label: "及格"
                    }
                ],
                username: '',
                trainClassId: '',
                courseId: '',
                isPass: '',
                stuId: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
                rank: "",
                logDialogVisible: false,
                examLogId: '',
                examHistroyLogs: [],
                examHistroyLogTotal: 0,
                logCurrentPage: 1,
                logPageSize: 10,
            }
        },
        async created() {
            await this.getCourseOptions()
            await this.getClassOptions()
            this.load()
        },
        methods: {
            load() {
                if (this.trainClassId === undefined) {
                    this.trainClassId = ''
                }
                if (this.courseId === undefined) {
                    this.courseId = ''
                }
                if (this.isPass === undefined) {
                    this.isPass = ''
                }
                if (this.$route.query.stuId === undefined) {
                    this.stuId = ''
                } else {
                    this.stuId = Number(this.$route.query.stuId)
                }
                request.get("/exam-log/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&username=" + this.username + "&trainClassId=" + this.trainClassId + "&courseId=" + this.courseId + "&isPass=" + this.isPass + "&stuId=" + this.stuId).then(res => {
                    if (res.code === '200') {
                        this.tableData = res.data.records
                        this.total = res.data.total
                    } else {
                        ElMessage.error("错误" + res.msg)
                    }
                })
            },
            async getCourseOptions() {
                request.get("/course/all").then(res => {
                    this.courseOptions = res.data
                })
            },
            async getClassOptions() {
                request.get("/train-class/all").then(res => {
                    this.classOptions = res.data
                })
            },
            handleCurrentChange(item) {
                // 改变当前页码触发
                this.currentPage = item
                this.load()
            },
            handleSizeChange(item) {   // 改变当前每页的个数触发
                this.pageSize = item
                this.load()
            },
            getRank(item) {
                request.get("/exam-log/getRankByCourseId?exampaperGetScore=" + item.exampaperGetScore + "&userId=" + item.stuId + "&courseId=" + item.courseId).then(res => {
                    if (res.code === '200') {
                        this.rank = res.data
                        this.dialogVisible = true
                    } else {
                        ElMessage.error("错误" + res.msg)
                    }
                })
            },
            reset() {
                this.dialogVisible = false
                this.rank = ""
            },
            getExamHistroyLog(item) {
                this.examLogId = item
                request.get("/exam-history-log/page?pageNum=" + this.logCurrentPage + "&pageSize=" + this.logPageSize + "&examLogId=" + item).then(res => {
                    if (res.code === '200') {
                        this.examHistroyLogs = res.data.records
                        this.examHistroyLogTotal = res.data.total
                        this.logDialogVisible = true
                    } else {
                        ElMessage.error("错误" + res.msg)
                    }
                })
            },
            getExamPaper(item) {
                this.$router.push({path: "/score/trueResult", query: {stuId: item.stuId, exampaperId: item.exampaperId}})
            },
            logReset() {
                this.logDialogVisible = false
                this.examLogId = ""
                this.examHistroyLogs = []
                this.examHistroyLogTotal = 0
                this.logCurrentPage = 1
                this.logPageSize = 10
            },
            handleLogCurrentChange(item) {
                this.logCurrentPage = item
                this.getExamHistroyLog(this.examLogId)
            },
            handleLogSizeChange(item) {
                this.logPageSize = item
                this.getExamHistroyLog(this.examLogId)
            }
        }
    }
</script>

<style scoped>
    /* 容器布局样式 */
    .score-container {
        padding: 15px;
        box-sizing: border-box;
        display: flex;
        height: 86vh;
        flex-direction: column;
        /* 垂直布局 */
    }

    /* 筛选条件区域样式 */
    .filter-wrap {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        /* 垂直居中 */
    }

    /* 输入框/下拉框统一样式 */
    .filter-item {
        width: 100%;
    }

    /* 搜索按钮样式 */
    .search-btn {
        width: auto;
        /* 取消固定宽度，适应内容 */
        padding: 0 20px;
        /* 增加内边距 */
    }

    /* 不及格状态红色文字样式 */
    :deep(.fail-status) {
        color: #f56c6c;
        font-weight: 600;
        position: relative;
        padding-left: 12px;
        /* 左侧留空 */
    }

    /* 表格优化样式 */
    .isolated-table {
        flex: 1;
        /* 占据剩余空间 */
        border-radius: 6px;
        overflow: hidden;

    /* 隐藏边框溢出 */

    /* 表头背景色 */
    :deep(th.el-table__cell) {
        background-color: #f5f7fa;
        font-weight: bold;
        /* 加粗 */
        color: black;
        /* 文字颜色设为黑色 */
        text-align: center;
        /* 文字水平居中 */
    }

    /* 行悬停效果 */
    :deep(.el-table__row:hover) {

    td {
        background-color: #f5f7fa !important;
    }

    }

    /* 单元格内边距 */
    :deep(.el-table__cell) {
        padding: 12px 0;
    }

    }

    /* 分页容器样式 */
    .pagination-container {
        margin-top: 10px;
        text-align: right;
    }
</style>
